<template>
  <div class="todo-container">
    <div class="todo-wrap">
      <Header :addTodo="addTodo"/>
      <List :todos="todos" :removeTodo="removeTodo" :updateTodos="updateTodos"/>
      <Footer :todos="todos" :checkAllTodos="checkAllTodos"
              :clearCompoleteTodos="clearCompoleteTodos"/>
    </div>
  </div>
</template>

<script>
import Header from './components/Header'
import List from './components/List'
import Footer from './components/Footer'
import {saveTodos, getTodos} from './utils/localStorageUtils'

export default {
  data() {
    return {
      todos: [
        // {id: 1, title: '吃饭', compolete: false},
        // {id: 2, title: '睡觉', compolete: true},
        // {id: 3, title: '打豆豆', compolete: false}
      ]
    }
  },
  mounted() {
    setTimeout(() => {
      // 取local中的数据赋值给todos
      this.todos = getTodos()
    }, 1000)
  },
  components: {
    Header,
    List,
    Footer
  },
  methods: {
    // 添加任务
    addTodo(todo) {
      this.todos.unshift(todo)
    },
    // 删除对应任务
    removeTodo(index) {
      this.todos.splice(index, 1)
    },
    // 控制全选/全不选
    checkAllTodos(value) {
      this.todos.forEach(todo => {
        if(todo.compolete !== value) {
          todo.compolete = value
        }
      })
    },
    // 删除已完成任务
    clearCompoleteTodos() {
      this.todos = this.todos.filter(item => !item.compolete) // 过滤出未完成的任务
    },
    // 更新任务
    updateTodos(todo, value) {
      todo.compolete = value
    }
  },
  watch: {
    todos: {
      deep: true,
      handler: saveTodos
    }
  }
}
</script>

<style scoped>
/*app*/
.todo-container {
  width: 600px;
  margin: 0 auto;
}
.todo-container .todo-wrap {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}
</style>